<template>
<div class="dashboard-container">
    <div class="app-container">
        <!-- 放置一个el-card卡片 -->
        <el-card>
            <el-tabs>
                <el-tab-pane label="登录账户设置">
                    <!-- 放置表单 -->
                    <el-form label-width="120px" style="margin-left: 120px; margin-top: 30px" ref="userForm" :rules="rules" :model="List">
                        <el-form-item label="姓名" prop="username">
                            <el-input style="width: 300px" v-model="List.username" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password2">
                            <el-input style="width: 300px" v-model="List.password2" type="password" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="saveUserDetailById">更新</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 个人详情 -->
                <el-tab-pane label="个人详情">
                    <!-- 放置打印组件按钮 -->
                    <el-row type="flex" justify="end">
                        <el-tooltip content="打印个人基本信息">
                            <router-link :to="`/employees/print/${userId}?type=personal`">
                                <i class="el-icon-printer" />
                            </router-link>
                        </el-tooltip>
                    </el-row>
                    <!-- <user-info /> -->
                    <component :is="Usercomponent"></component>
                </el-tab-pane>
                <!-- 岗位信息 -->
                <el-tab-pane label="岗位信息">
                    <!-- 放置打印组件按钮 -->
                    <el-row type="flex" justify="end">
                        <el-tooltip content="打印岗位信息">
                            <router-link :to="`/employees/print/${userId}?type=job`">
                                <i class="el-icon-printer" />
                            </router-link>
                        </el-tooltip>
                    </el-row>
                    <component :is="Jobcomponent"></component>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</div>
</template>

<script>
import {
    getUserDetailById
} from "@/api/user"
import {
    saveUserDetailById
} from "@/api/employees"
import UserInfo from './components/user-info.vue'
import JobInfo from './components/job-info.vue'
export default {
    components: {
        UserInfo,
        JobInfo
    },
    data() {
        return {
            Usercomponent: 'user-info',
            Jobcomponent: 'job-info',
            List: {
                username: "",
                password2: "",
            },
            userId: this.$route.params.id, // 这样可以后面直接通过 this.userId进行获取数据
            rules: {
                username: [{
                    required: true,
                    message: "姓名不能为空",
                    trigger: "blur"
                }, ],
                password2: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 9,
                        message: "密码长度6-9位",
                        trigger: "blur"
                    },
                ]
            }
        }
    },
    created() {
        this.getUserDetailById();
    },
    methods: {
        async getUserDetailById() {
            this.List = await getUserDetailById(this.userId);
        },
        async saveUserDetailById() {
            try {
                await this.$refs.userForm.validate()
                await saveUserDetailById({
                    ...this.List,
                    password: this.List.password2
                })
                this.$message.success('更新成功')
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

<style>
</style>
